<template>
  <a-row :gutter="24" class="search-row">
    <a-col :span="24">
      <x-card>
        <div slot="content" class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :span="6">
                <a-form-item label="数据来源" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select
                    allow-clear
                    placeholder="请选择数据来源"
                    v-model="selectedCheckTypes"
                    mode="multiple"
                    @change="handleCheckTypeChange"
                    style="height: 40px; overflow-y: auto;"
                  >
                    <a-select-option value="全部">全部</a-select-option>
                    <a-select-option v-for="item in CheckTypeList" :key="item.id" :value="item.item">{{
                      item.item
                    }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="隐患单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-tree-select
                    allowClear
                    showSearch
                    style="width: 100%;"
                    tree-node-filter-prop="title"
                    v-model="DangerOrganizationName"
                    :treeData="QHSEOrganizationTree"
                    v-if="QHSEOrganizationTree.length"
                    @change="handleOrganizationSelectChange"
                    :defaultExpandAll="true"
                    :defaultExpandedKeys="defaultExpandedKeys"
                    :replaceFields="replaceFields"
                    ref="tree"
                    placeholder="请选择隐患单位"
                    :title="DangerOrganizationName"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item
                  label="作业专业"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-select
                    style="height: 40px; overflow-y: auto;"
                    allow-clear
                    placeholder="请选择作业专业"
                    v-model="selectedWorkSpecialty"
                    @change="handleZYZYSelectChange"
                    mode="multiple"
                    :max-tag-count="7">
                    <a-select-option value="全部">全部</a-select-option>
                    <a-select-option v-for="item in QHSEKeyWorkSpecialtyList" :key="item.id" :value="item.specialty" :code="item.specialtyCode">{{
                      item.specialty
                    }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item
                  label="关键作业类型"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-select
                    style="height: 40px; overflow-y: auto;"
                    allow-clear
                    placeholder="请选择关键作业类型"
                    v-model="selectedWorkType"
                    @change="handleKeyWorkTypeSelectChange"
                    mode="multiple"
                    :max-tag-count="9">
                    <a-select-option value="全部" v-if="selectedWorkSpecialty && selectedWorkSpecialty.length !== 0">全部</a-select-option>
                    <a-select-option v-for="item in KeyWorkTypeList" :key="item.id" :value="item.workType">{{
                      item.workType
                    }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-date-picker
                    style="width: 100%"
                    format="YYYY-MM-DD"
                    @change="onChange1"
                    :style="{ width: '100%' }"
                    v-model="TimeOn"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="结束时间" :labelCol="{ style: 'width:75px' }">
                  <a-date-picker
                    style="width: 100%"
                    format="YYYY-MM-DD"
                    @change="onChange2"
                    :style="{ width: '100%' }"
                    v-model="TimeEnd"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="检查单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-tree-select
                    allowClear
                    showSearch
                    style="width: 100%;"
                    tree-node-filter-prop="title"
                    v-model="checkOrganizationName"
                    :treeData="QHSEOrganizationTree1"
                    v-if="QHSEOrganizationTree1.length"
                    @change="handleCheckOrganizationSelectChange"
                    :defaultExpandAll="true"
                    :defaultExpandedKeys="defaultExpandedKeys"
                    :replaceFields="replaceFields"
                    ref="tree"
                    placeholder="请选择检查单位"
                    :title="checkOrganizationName"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="6" style="margin-bottom: 3px;">
                <a-button type="primary" :loading="loading2" @click="handleClick">{{ loading2 ? '查询中...' : '查询' }}</a-button>
                <a-button style="margin-left: 8px" @click="reset">重置</a-button>
                <a-button type="primary" @click="handleExport" :loading="batchExportLoading"><a-icon type="export"/>导出数据</a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </x-card>
      <a-row :gutter="48" class="search-row">
        <a-col :span="24">
          <a-divider orientation="left" style="font-weight: bold; margin-bottom: -2px;margin-top: -2px"> 关键作业分析 </a-divider>
          <a-card style="overflow-y: hidden" :style="{ height: cardHeight }">
            <a-progress
              class="prog"
              type="circle"
              :strokeWidth="10"
              :percent="percent"
              :width="200"
              v-if="loading"
            />
            <a-row style="width: 100%; height: 600px; margin-top: 50px">
              <a-col :span="24">
                <div id="bar-chart-container" style="width: 100%; height: 600px"></div>
              </a-col>
            </a-row>
            <a-row style="width: 100%; height: 500px">
              <a-col :span="24">
                <div id="bar-chart-container1" style="width: 100%; height: 500px"></div>
              </a-col>
            </a-row>
            <a-row style="width: 100%; height: 500px; margin-top: 50px">
              <a-col :span="24">
                <div id="bar-chart-container2" style="width: 100%; height: 500px"></div>
              </a-col>
            </a-row>
            <a-row style="width: 100%; height: 500px; margin-top: 50px">
              <a-col :span="24">
                <div id="bar-chart-container3" style="width: 100%; height: 500px"></div>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
</template>
<script>
import { STable, XCard, XDown } from '@/components'
import { getQHSEOrganizationTree } from '@/api/modular/system/QHSEOrganization'
import { getCheckTypeList } from '@/api/modular/system/QHSEDictionary'
import { getQHSEKeyWorkSpecialtyList, getQHSEKeyWorkTypePage } from '@/api/modular/system/QHSEKeyWork'
import { getKWKeyWorkAnalysis,
         getKWDangerTypeAnalysis,
         getKWDangerStatusAnalysis,
         getKWUnsafeFactorsAnalysis } from '@/api/modular/system/dangerKeyWorkAnalysis'
import * as echarts from 'echarts'
import moment from 'moment'
import { mapGetters } from 'vuex'
import * as XLSX from 'xlsx'
export default {
  components: {
    XDown,
    XCard,
    STable
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      // 获取参数
      queryParam: {
        TimeOn: moment(new Date()).subtract(1, 'months').format('YYYY-MM-DD'),
        TimeEnd: moment(new Date()).format('YYYY-MM-DD') + 'T' + moment().format('23:59:59')
      },
      cardHeight: '400px',
      selectedValue: null,
      batchExportLoading: false,
      TimeOn: moment(new Date(), 'YYYY-MM-DD').subtract(1, 'months'),
      TimeEnd: moment(new Date(), 'YYYY-MM-DD'),
      chart: false,
      tableData1: [],
      tableData2: [[]],
      tableData3: [[]],
      tableData4: [[]],
      QHSEOrganizationTree: [],
      QHSEOrganizationTree1: [],
      checkOrganizationName: '',
      DangerOrganizationName: '',
      selectedCheckTypes: [],
      workSpeciality: [],
      CheckTypeList: [],
      QHSEKeyWorkSpecialtyList: [],
      KeyWorkTypeList: [],
      selectedWorkType: [],
      selectedWorkSpecialty: [],
      defaultExpandedKeys: [],
      replaceFields: {
        children: 'children',
        title: 'title',
        key: 'workflowId',
        value: 'id',
        parentId: 'parentId'
      },
      loading: false,
      loading2: false,
      percent: 0,
      secondOraName: {
          id: ''
        }
    }
  },
  created() {
    this.getQHSEOrganizationTree()
    this.getCheckTypeList()
    this.getQHSEKeyWorkSpecialtyList()
  },
  computed: {
      ...mapGetters(['userInfo'])
      },
  watch: {
    percent(newVal) {
      if (newVal === 100) {
        setTimeout(() => {
          this.percent = 1
          // this.loading = false
          this.loading2 = false
        }, 500)
      }
    }
  },
  methods: {
    exportWholePageToExcel() {
      const tablesData = [
        { data: this.tableData1, name: '关键作业' },
        { data: this.tableData2, name: '隐患级别' },
        { data: this.tableData3, name: '隐患整改情况' },
        { data: this.tableData4, name: '隐患类别' }
      ]
      console.log(tablesData)
       // 创建一个工作簿
      const workbook = XLSX.utils.book_new()
      // 遍历每个表格的数据，将其转换为对应的工作表并添加到工作簿
      tablesData.forEach(({ data, name }, index) => {
        // 将每个数组转换为对应的工作表
        const worksheet = XLSX.utils.json_to_sheet(data)
        // 将工作表添加到工作簿，并使用表格名称作为工作表名称
        XLSX.utils.book_append_sheet(workbook, worksheet, name)
      })
      // 生成Excel文件
      XLSX.writeFile(workbook, '隐患关键作业分析.xlsx')
      this.batchExportLoading = false
      },
      handleExport() {
        this.batchExportLoading = true
        this.exportWholePageToExcel()
      },
    renderBarChart(data, containerId, chartType) {
      const barChartContainer = document.getElementById(containerId)
      const barChart = echarts.init(barChartContainer)
      const barChartData = data.map((item) => ({
        value: item.value,
        name: item.name
      }))
      const barChartOptions = {
        title: {
          text: '',
          textStyle: {
            fontWeight: 'bold',
            fontSize: 20
          },
          left: 'center' // 标题水平居中
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          containLabel: true,
          top: 60
        },
        xAxis: {
          type: 'category',
          data: null,
          axisLabel: {
            interval: 0
          }
        },
        yAxis: {
          type: chartType === 'vertical' ? 'value' : 'category',
          data: null
        },
        series: [
          {
            type: 'bar',
            data: barChartData,
            barWidth: '60%',
            label: {
              show: true, // 显示标签
              position: 'top',
              formatter: function (params) {
                // 只显示偶数索引的标签
                return params.dataIndex % 2 === 0 ? params.value : ''
              }
            }
          }
        ]
      }
      if (containerId === 'bar-chart-container') {
        barChartOptions.title.text = '关键作业'
        barChartOptions.yAxis.type = 'value'
        barChartOptions.xAxis.data = barChartData.map(item => item.name)
        barChartOptions.xAxis.axisLabel = {
           formatter: function (value) {
             return value.split('').join('\n') // 在每个字符之间添加换行符
           },
           fontSize: 14 // 设置较大的字体大小
         }
      }
      if (barChartData.length > 0) {
        barChart.setOption(barChartOptions)
      }
    },
    renderMulBarChart(data, containerId, chartType) {
      const barChartContainer = document.getElementById(containerId)
      const barChart = echarts.init(barChartContainer)
      if (data.item === undefined) {
        return
      }
      const barChartData = data.item
      const barChartOption = {
        title: {
          text: '',
          textStyle: {
            fontWeight: 'bold',
            fontSize: 20
          },
          left: 'center' // 标题水平居中
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          orient: 'horizontal',
          x: 'center',
          y: 'bottom',
          textStyle: {
            fontSize: 16
          }
        },
        grid: {
          containLabel: true,
          top: 60
        },
        xAxis: {
          type: 'category'
        },
        yAxis: {
          type: 'value'
        },
        series: []
      }
      const headerRow = barChartData[0]
      for (var i = 1; i < headerRow.length; i++) {
        var dataObj = {
          name: headerRow[i],
          type: 'bar',
          data: barChartData.slice(1).map(row => row[i]),
          label: {
            show: true, // 显示标签
            position: 'top',
            formatter: function (params) {
              // 根据seriesIndex来决定是否显示标签
              if (params.seriesIndex % 4 === 0) {
                return params.value
              } else {
                return ''
              }
            }
          }
        }
        barChartOption.series.push(dataObj)
      }
      barChartOption.title.text = barChartData[0][0]
      // 超过13个专业竖着显示横坐标
      if (barChartData.length > 13) {
          barChartOption.xAxis.axisLabel = {
            formatter: function (value) {
              return value.split('').join('\n') // 在每个字符之间添加换行符
            },
            fontSize: 14
        }
      } else {
        barChartOption.xAxis.axisLabel = {
          interval: 1,
          formatter: null,
          fontSize: 14 // 设置较大的字体大小
        }
      }
      barChartOption.xAxis.data = barChartData.slice(1).map(row => row[0])
      if (barChartData.length > 0) {
        barChart.setOption(barChartOption)
      }
      barChart.setOption(barChartOption)
    },
    handleCheckTypeChange(value) {
      if (value.includes('全部')) {
        // 选中了全部选项，将所有选项都添加到 selectedCheckTypes 中
        this.selectedCheckTypes = this.CheckTypeList.map((item) => item.item)
      }
      this.queryParam.CheckType = this.selectedCheckTypes.map((option) => option.toString())
    },
    async handleClick() {
      if (this.queryParam.CheckType.length === 0 ||
          !this.queryParam.DangerOrganizationName ||
          !this.TimeOn ||
          !this.TimeEnd ||
          !this.queryParam.keyWorks ||
          this.queryParam.workSpeciality.length === 0 ||
          this.queryParam.keyWorks.length === 0) {
        this.$message.warning('请填写完整的查询条件')
      } else {
        try {
          // console.log(this.queryParam)
          // this.loading = true
          this.loading2 = true
          this.percent = 1
          await this.loadData() // 调用加载数据的方法
          await this.loadData1()
          await this.loadData2()
          await this.loadData3()
          this.cardHeight = 'auto'
        } catch (error) {
          // 处理错误
          console.error(error)
        }
          this.chart = true
        // console.log(this.queryParam)
      }
    },
    async loadData() {
      return new Promise((resolve, reject) => {
        // 异步操作
        getKWKeyWorkAnalysis(this.queryParam)
        .then(res => {
          this.tableData1 = res.data
          this.renderBarChart(res.data, 'bar-chart-container', 'horizontal')
          this.percent += 24
        })
        .catch(error => {
          // 处理请求错误
          console.error(error)
          // 显示错误信息
          this.$message.error('获取数据失败')
          this.loading2 = false
        })
        resolve() // 异步操作完成后调用 resolve()
      })
    },
    async loadData1() {
      return new Promise((resolve, reject) => {
        // 异步操作
        getKWDangerTypeAnalysis(this.queryParam)
        .then(res => {
          this.tableData2 = res.data.item
          this.renderMulBarChart(res.data, 'bar-chart-container1', 'horizontal')
          this.percent += 25
        })
        .catch(error => {
          // 处理请求错误
          console.error(error)
          this.loading2 = false
          // 显示错误信息
          this.$message.error('获取数据失败')
        })
        resolve() // 异步操作完成后调用 resolve()
      })
    },
    async loadData2() {
      return new Promise((resolve, reject) => {
        // 异步操作
        getKWDangerStatusAnalysis(this.queryParam)
        .then(res => {
          this.tableData3 = res.data.item
          this.renderMulBarChart(res.data, 'bar-chart-container2', 'horizontal')
          this.percent += 25
        })
        .catch(error => {
          // 处理请求错误
          console.error(error)
          this.loading2 = false
          // 显示错误信息
          this.$message.error('获取数据失败')
        })
        resolve() // 异步操作完成后调用 resolve()
      })
    },
    async loadData3() {
      return new Promise((resolve, reject) => {
        // 异步操作
        getKWUnsafeFactorsAnalysis(this.queryParam)
        .then(res => {
          this.tableData4 = res.data.item
          this.renderMulBarChart(res.data, 'bar-chart-container3', 'horizontal')
          this.percent += 25
        })
        .catch(error => {
          // 处理请求错误
          console.error(error)
          this.loading2 = false
          // 显示错误信息
          this.$message.error('获取数据失败')
        })
        resolve() // 异步操作完成后调用 resolve()
      })
    },
    // 更改检查单位
    handleCheckOrganizationSelectChange(val, opt, extra) {
      if (extra.triggerNode === undefined) {
        this.queryParam.checkOrganizationName = null
        this.queryParam.checkOrganizationId = null
      } else {
        const option = extra.triggerNode._props.title
        this.queryParam.checkOrganizationName = option
        this.queryParam.checkOrganizationId = extra.triggerNode._props.value
        this.checkOrganizationName = this.queryParam.checkOrganizationName
      }
    },
    onChange1(date, dateString) {
        // console.log(dateString, date)
        if (this.queryParam.TimeEnd && dateString) {
          if (dateString > this.queryParam.TimeEnd) {
            this.$message.error('开始时间不能晚于结束时间')
            this.TimeEnd = moment(new Date(), 'YYYY-MM-DD')
            this.TimeOn = moment(new Date(), 'YYYY-MM-DD').subtract(1, 'months')
            this.queryParam.TimeOn = moment(new Date()).subtract(1, 'months').format('YYYY-MM-DD')
            this.queryParam.TimeEnd = moment(new Date()).format('YYYY-MM-DD') + 'T' + moment().format('23:59:59')
          } else {
            this.queryParam.TimeOn = dateString
          }
        } else {
          this.queryParam.TimeOn = dateString
        }
      },
    onChange2(date, dateString) {
      if (this.queryParam.TimeOn && dateString) {
        if (this.queryParam.TimeOn > dateString) {
          this.$message.error('开始时间不能晚于结束时间')
          this.TimeEnd = moment(new Date(), 'YYYY-MM-DD')
          this.TimeOn = moment(new Date(), 'YYYY-MM-DD').subtract(1, 'months')
          this.queryParam.TimeOn = moment(new Date()).subtract(1, 'months').format('YYYY-MM-DD')
          this.queryParam.TimeEnd = moment(new Date()).format('YYYY-MM-DD') + 'T' + moment().format('23:59:59')
        } else {
          this.queryParam.TimeEnd = dateString + 'T' + moment().format('23:59:59')
        }
      } else {
        this.queryParam.TimeEnd = dateString + 'T' + moment().format('23:59:59')
      }
    },
    // 更改单位
    handleOrganizationSelectChange(val, opt, extra) {
          if (extra.triggerNode === undefined) {
            this.queryParam.DangerOrganizationName = null
            this.queryParam.DangerOrganizationId = null
          } else {
            const option = extra.triggerNode._props.title
            this.queryParam.DangerOrganizationName = option
            this.queryParam.DangerOrganizationId = extra.triggerNode._props.value
            this.DangerOrganizationName = this.queryParam.DangerOrganizationName
          }
        },
    handleZYZYSelectChange(value, option) {
      this.KeyWorkTypeList = []
      this.selectedWorkType = []
      this.queryParam.keyWorks = []
      if (option || value) {
        let codes = []
        let labels = []
        if (value.includes('全部')) {
          this.selectedWorkSpecialty = this.QHSEKeyWorkSpecialtyList.map(item => item.specialty)
          // this.queryParam.CheckType = this.selectedCheckTypes.map((option) => option.toString())
          codes = this.QHSEKeyWorkSpecialtyList.map(item => item.specialtyCode)
          labels = this.QHSEKeyWorkSpecialtyList.map(item => item.specialty)
        } else {
          codes = option.map(item => item.data.attrs.code)
          labels = option.map(item => item.componentOptions.propsData.value)
        }
        // console.log('option:', option)
        // console.log('codes:', codes)
        // console.log('labels:', labels)
        for (let i = 0; i < codes.length; i++) {
          const code = codes[i]
          const label = labels[i]
          getQHSEKeyWorkTypePage({ 'code': code }).then(res => {
            const rowsWithIndex = res.data.rows.map(row => {
              return {
                ...row,
                workType: `${label}-${row.workType}`
              }
            })
            this.KeyWorkTypeList = this.KeyWorkTypeList.concat(rowsWithIndex)
            const sele = '全部'
            this.handleKeyWorkTypeSelectChange(sele)
          })
        }
      }
      this.queryParam.workSpeciality = this.selectedWorkSpecialty.map((option) => option.toString())
      // console.log('this.queryParam.workSpeciality', this.queryParam.workSpeciality)
    },
    handleKeyWorkTypeSelectChange(value, option) {
      if (value.includes('全部')) {
        this.selectedWorkType = this.KeyWorkTypeList.map(item => item.workType)
        this.queryParam.keyWorks = [...this.selectedWorkType]
      } else {
        this.queryParam.keyWorks = value
      }
    },
    getQHSEKeyWorkSpecialtyList(text) {
      getQHSEKeyWorkSpecialtyList().then((res) => {
        this.QHSEKeyWorkSpecialtyList = res.data
        const select = '全部'
        this.handleZYZYSelectChange(select)
      })
    },
    getQHSEOrganizationTree () {
      this.secondOraName.id = this.userInfo.secondOrganizationName
      getQHSEOrganizationTree(Object.assign(this.secondOraName)).then(res => {
      // console.log('tree:', res.data)
      this.treeLoading = false
      if (!res.success) {
          return
      }
      this.QHSEOrganizationTree = res.data
      if (res.data.length === 0) {
              this.secondOraName.id = '机关总部'
              getQHSEOrganizationTree(Object.assign(this.secondOraName)).then(res => {
                this.QHSEOrganizationTree = res.data
                this.queryParam.DangerOrganizationName = res.data[0].title
                this.queryParam.DangerOrganizationId = res.data[0].id
                this.DangerOrganizationName = this.queryParam.DangerOrganizationName
              })
            } else {
              this.queryParam.DangerOrganizationName = res.data[0].title
              this.queryParam.DangerOrganizationId = res.data[0].id
              this.DangerOrganizationName = this.queryParam.DangerOrganizationName
            }
     })
     this.secondOraName.id = '安检院'
     getQHSEOrganizationTree(Object.assign(this.secondOraName)).then(res => {
       // console.log('tree:', res.data)
       this.treeLoading = false
       if (!res.success) {
         return
       }
       this.QHSEOrganizationTree1 = res.data
       this.queryParam.checkOrganizationName = res.data[0].title
       this.queryParam.checkOrganizationId = res.data[0].id
       this.checkOrganizationName = this.queryParam.checkOrganizationName
     })
     },
    // 检查类型-数据来源
    getCheckTypeList(text) {
      getCheckTypeList().then((res) => {
        this.CheckTypeList = res.data
        const select = '全部'
        this.handleCheckTypeChange(select)
      })
    },
    reset() {
      this.queryParam = {
        TimeOn: moment(new Date()).subtract(1, 'months').format('YYYY-MM-DD'),
        TimeEnd: moment(new Date()).format('YYYY-MM-DD') + 'T' + moment().format('23:59:59')
      }
      this.TimeEnd = moment(new Date(), 'YYYY-MM-DD')
      this.TimeOn = moment(new Date(), 'YYYY-MM-DD').subtract(1, 'months')
      this.selectedCheckTypes = []
      this.selectedWorkType = []
      this.KeyWorkTypeList = []
      this.selectedWorkSpecialty = []
    }
  }
}
</script>
<style lang="less" scoped>
.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
}

.search-row {
  display: flex;
  align-items: center;
}

.search-buttons {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.chart-container {
  margin-top: 20px;
  /* 调整顶部边距 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
  .prog {
  position: relative;
  top: 90px;
  left: 42%;
}
/deep/.ant-progress-text {
  font-size: 2rem;
}
/deep/.ant-progress-circle-path {
  animation: rotate 3s linear infinite;
  transform-origin: center center;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
